<template>
  <view class="about-container">
    <!-- 头部 Logo 区域 -->
    <view class="header-section animate__animated animate__fadeInDown">
      <image :src="url('logo', '', 'jpg')" mode="aspectFit" class="logo" />
      <!-- <text class="app-name">墨枢</text> -->
      <text class="version">Version {{ version }}</text>
    </view>

    <!-- 简介区域 -->
    <view class="content-section animate__animated animate__fadeIn">
      <view class="info-card">
        <view class="card-header">
          <text class="bi bi-info-circle"></text>
          <text class="title">关于我们</text>
        </view>
        <view class="card-content">
          <text class="description">墨枢App旨在传承中华文化，通过展示中国古代物理学的辉煌成就，增强文化认同感。它以互动有趣的方式激发用户对科学的兴趣，培养科学素养，并结合现代科技推动教育创新，提供全新的学习体验。
          </text>
        </view>
      </view>

      <!-- 联系方式卡片 -->
      <view class="info-card">
        <view class="card-header">
          <text class="bi bi-headset"></text>
          <text class="title">联系我们</text>
        </view>
        <view class="contact-list">
          <view class="contact-item">
            <text class="bi bi-envelope"></text>
            <text class="label">邮箱：</text>
            <text class="value">contact@gannan.com</text>
          </view>
          <view class="contact-item">
            <text class="bi bi-telephone"></text>
            <text class="label">电话：</text>
            <text class="value">0791-88888888</text>
          </view>
          <view class="contact-item" @tap="joinQQGroup">
            <text class="bi bi-chat-dots"></text>
            <text class="label">QQ群：</text>
            <text class="value link">点击加入交流群</text>
          </view>
        </view>
      </view>

      <!-- 社交媒体链接 -->
      <view class="social-links">
        <view class="link-item" @tap="copyWechat">
          <text class="bi bi-wechat icon"></text>
          <text>微信公众号</text>
        </view>
        <view class="link-item" @tap="openWeibo">
          <text class="bi bi-sina-weibo icon"></text>
          <text>官方微博</text>
        </view>
      </view>

      <!-- 应用下载区域 -->
      <view class="download-section">
        <view class="download-title"><text class="bi bi-cloud-arrow-down-fill"></text> 墨枢APP应用下载</view>
        <view class="download-buttons">
          <view class="download-btn android" @tap="downloadAndroid">
            <text class="bi bi-android2 icon"></text>
            <text>Android 下载</text>
          </view>
          <view class="download-btn ios" @tap="downloadIOS">
            <text class="bi bi-apple icon"></text>
            <text>iOS 下载(Beta)</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部版权信息 -->
    <view class="footer-section">
      <text class="copyright">© 2025 墨枢. All rights reserved.</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
const url = $url;
const version = ref('1.0.0');

// 加入QQ群
const joinQQGroup = () => {
  // #ifdef H5
  window.location.href = 'https://qm.qq.com/q/7uu9pZrJde';
  // #endif
  
  // #ifdef APP-PLUS || MP
  uni.setClipboard({
    data: 'https://qm.qq.com/q/7uu9pZrJde',
    success: () => {
      uni.showToast({
        title: '链接已复制，请在浏览器中打开',
        icon: 'none'
      });
    }
  });
  // #endif
};

// 复制微信公众号
const copyWechat = () => {
  uni.setClipboard({
    data: '公众号：不想学微分几何',
    success: () => {
      uni.showToast({
        title: '公众号已复制',
        icon: 'success'
      });
    }
  });
};

// 打开微博
const openWeibo = () => {
  uni.setClipboard({
    data: '微博：不想学微分几何',
    success: () => {
      uni.showToast({
        title: '微博已复制',
        icon: 'success'
      });
    }
  });
};

// 下载安卓应用
const downloadAndroid = () => {
  // #ifdef H5
  window.location.href = 'https://epoch.jxksd.top/mo/app/mo.apk';
  // #endif
  
  // #ifdef APP-PLUS || MP
  uni.setClipboard({
    data: 'https://epoch.jxksd.top/mo/app/mo.apk',
    success: () => {
      uni.showToast({
        title: '下载链接已复制到剪贴板',
        icon: 'none'
      });
    }
  });
  // #endif
};

// 下载iOS应用
const downloadIOS = () => {
  // #ifdef H5
  uni.showToast({
    title: '即将上线',
    icon: 'none'
  });
  // #endif
  
  // #ifdef APP-PLUS || MP
  uni.showToast({
    title: 'iOS版本即将上线，敬请期待',
    icon: 'none'
  });
  // #endif
};
</script>

<style lang="scss" scoped>
.about-container {
  min-height: 100vh;
  padding: 40rpx;
  background: #f8f9fa;
}

.header-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60rpx;
  
  .logo {
    width: 160rpx;
    height: 160rpx;
    margin-bottom: 20rpx;
  }
  
  .app-name {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .version {
    font-size: 24rpx;
    color: #666;
  }
}

.info-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    .bi {
      font-size: 36rpx;
      color: var(--td-brand-color, #981f23);
      margin-right: 16rpx;
    }
    
    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .description {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
  }
}

.contact-list {
  .contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    font-size: 28rpx;
    
    .bi {
      color: var(--td-brand-color, #981f23);
      margin-right: 16rpx;
    }
    
    .label {
      color: #666;
      margin-right: 10rpx;
    }
    
    .value {
      color: #333;
      
      &.link {
        color: var(--td-brand-color, #981f23);
        text-decoration: underline;
      }
    }
  }
}

.social-links {
  display: flex;
  justify-content: space-around;
  margin: 40rpx 0;
  
  .link-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #666;
    font-size: 24rpx;
    
    .icon {
      font-size: 48rpx;
      color: var(--td-brand-color, #981f23);
      margin-bottom: 10rpx;
    }
  }
}

.download-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-top: 30rpx;
  
  .download-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 30rpx;
  }
  
  .download-buttons {
    display: flex;
    justify-content: space-around;
    
    .download-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20rpx 40rpx;
      border-radius: 12rpx;
      font-size: 28rpx;
      
      &.android {
        background:var(--td-brand-color);
        color: #fff;
      }
      
      &.ios {
        background: #000;
        color: #fff;
      }
      
      .icon {
        font-size: 48rpx;
        margin-bottom: 10rpx;
      }
    }
  }
}

.footer-section {
  text-align: center;
  margin-top: 60rpx;
  
  .copyright {
    font-size: 24rpx;
    color: #999;
  }
}
</style> 